<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }
        .container {
            background-color: rgba(157, 157, 231, 0.5); /* 半透明蓝色 */
            border-radius: 8px;
            cursor: auto;
        }
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6); /* 半透明白色 */
            transform: scale(0);
            animation: ripple-animation 0.6s linear;
            pointer-events: none;
        }

        @keyframes ripple-animation {
            to {
                transform: scale(4); /* 扩大到4倍 */
                opacity: 0; /* 渐隐 */
            }
        }
      </style>
  </head>
  <body  id="app" class="container" >
    <script type="module" src="/src/main.js"></script>
  </body>
  <script>
      //onclick="createRipple(event)"
      function createRipple(event) {

          const container = event.currentTarget;
          const ripple = document.createElement("span");
          const size = Math.max(container.clientWidth, container.clientHeight);
          const x = event.clientX - container.offsetLeft - size / 2;
          const y = event.clientY - container.offsetTop - size / 2;

          ripple.style.width = ripple.style.height = `${size}px`;
          ripple.style.left = `${x}px`;
          ripple.style.top = `${y}px`;
          ripple.classList.add('ripple');
          container.appendChild(ripple);

          ripple.addEventListener('animationend', () => {
              ripple.remove(); // 动画结束后移除元素
          });
      }
  </script>
</html>
